<template>
  <view>
    <!-- 搜索 -->
    <search></search>
    <!-- 分类内容 -->
    <view class="category" >
      <!-- 左边分类 -->
        <!-- scroll-view 微信小程序开发组件提供的小程序滚动 scroll-y y轴方向滚动 -->
      <scroll-view scroll-y class="category-left">
        <!-- 它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性 -->
        <block v-for="(item,index) in cateList" :key="index">
          <view
            @tap="changeIndex(index)"
            class="category-left-item"
            :class="{active:index==tabIndex}"
          >{{item.cat_name}}</view>
        </block>
      </scroll-view>
      <!-- 右边分类内容 -->
      <scroll-view scroll-y class="category-right">
        <!-- 跳转 -->
        <!-- <navigator url='/pages/goods_list/main'>跳转吧</navigator> -->
        <!-- 右侧内容 -->
        <block v-for="(brandItem,brandIndex) in cateBrands.children" :key="brandIndex">
          <view class="floor">
            <!-- 头部品牌 -->
            <view class="floor-title">
              {{brandItem.cat_name}}
            </view>
            <!-- 每一个品牌内容 -->
            <view class="floor-content">
              <block v-for="(item,index) in brandItem.children" :key="index">
                <!-- 通过事件实现跳转  -->
                <view class="floor-content-item"  @tap='goodsHandle(item.cat_name)'>
                <image :src="'https://itjustfun.cn/'+item.cat_icon"></image>
                <view>{{item.cat_name}}</view>
              </view>
              </block>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import search from '@/components/search.vue'
import request from '@/utils/request.js'
import {categoryData} from '@/api'
export default {
  data() {
    return {
      tabIndex: 0,
      //存储获取的分类数据
      cateList:[],
      //存储最外层分类数据里面的children 用来渲染我们的右侧分了品牌
      cateBrands:[]
    }
  },
  mounted () {
    //请求分类数据
    categoryData()
      .then(res=>{
        console.log(res)
        /* 解构赋值操作 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
        {message}={message这个message是一个数组res.data是一个对象}
        */
        let {message}=res.data
        this.cateList = message
        this.cateBrands = message[0]
      })
  },
  components: {
    search
  },
  methods: {
    changeIndex(index) {
      this.tabIndex = index;
      //实现点击左侧的分类 数据重新获取 index为我们当前点击的分类栏
      //当我们直接将右侧数据赋值后 由于数据过多滑动的时候我们的滚动条不开始位置 具体原因不太清楚可以搜索
      //解决办法是可以在设置之前先将原来的dom数据清空，等待清空完毕在重新赋值渲染
      this.cateBrands=[]
      //nextTick的执行条件是 只要我的页面有dom更新就执行解决异步更新数据 达到特定的dom更新 实现数据更新达到视图更新
      this.$nextTick(()=>{
        // console.log(111);
        this.cateBrands = this.cateList[index]
      })
    },
    /* 跳转到我的搜索页面 并携带参数 */
    goodsHandle(keyname){
      /* 通过小程序的api我们找到了路由跳转 我们现在跳转的不是tabBar的页面所以使用navigateTo() */
      wx.navigateTo({
        /* 传参 */
        url: `/pages/goods_list/main?keyword=${keyname}`
        })
    }
  }
}
</script>

<style lang='scss' scoped>
.category {
  /* 我们可以使用fixed定位实现我们的高宽100% 通过top left bottom right */
  position: fixed;
  display: flex;
  top: 84rpx;
  bottom: 0rpx;
  left: 0rpx;
  right: 0rpx;
  background-color: yellow;
  &-left {
    width: 200rpx;
    height: 100%;
    background-color: #f1f1f1;
    &-item {
      line-height: 100rpx;
      text-align: center;
      font-size: 28rpx;
      &.active {
        color: rgb(167, 21, 21);
        background-color: #fff;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          width: 7rpx;
          /* 定位拉伸盒子 */
          left: 0;
          top: 15rpx;
          bottom: 15rpx;
          background-color: red;
        }
      }
    }
  }
  &-right {
    flex: 1;
    background-color: white;
    .floor{
      &-title{
        text-align: center;
        padding: 20rpx 0;
        font-size: 28rpx;
        &::before,&::after{
          content: "/";
          color:#ccc;
        }
      }
      &-content{
        display: flex;
        flex-wrap:wrap; 
        &-item{
          width:33.33%;
          text-align: center;
          padding: 20rpx 0 ;
          image{
            width: 120rpx;
            height: 90rpx;
          }
          view{
            font-size: 24rpx;
          }
        }
      }
    }
  }
}
</style>


